<template>
  <section class="forgot">
    <div class="logo">
      短信验证码
    </div>
    <div class="login-box">
      <form class="form-input">
        <div style="border-bottom: 1px solid #dfdfdf">
          <x-input type="tel" v-model="code" placeholder="短信验证码"></x-input>
        </div>
      </form>
      <x-button :gradients="buttonColor" @click.native="doNext">下一步</x-button>
      <p class="tip">
        已有云账号？
        <span @click="goLogin">登陆</span>
      </p>
    </div>
  </section>
</template>

<script>
  import {XInput, XButton} from 'vux'
  export default {
    name: 'login',
    components: {
      XInput,
      XButton
    },
    data () {
      return {
        buttonColor: ['#1D62F0', '#19D5FD'],
        code: ''
      }
    },
    methods: {
      doNext () {
        let param = {
          phone: this.phone
        }
        console.log(param)
        this.$router.push({path: '/forgot3'})
      },
      goLogin () {
        this.$router.push({path: '/login'})
      }
    }
  }
</script>

<style lang="less" scoped>
  .forgot {
    height: 100%;
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    .logo {
      text-align: center;
      font-size: 40px;
      padding-top: 10vh;
    }
    .form-input {
      padding: 15px 0;
    }
    .tip {
      padding-top: 20vh;
      text-align: center
    }
  }
</style>
